<template>
  <div class="form-designer-color-picker-wrap">
    <el-input :maxlength="7" v-bind="controlProps" v-model="value"></el-input>
    <el-color-picker v-model="value" style="margin-left: 4px" :show-alpha="false"></el-color-picker>
  </div>
</template>

<script>

import FormBase from './mixins/FormBase'

export default {
  name: 'FormColorPicker',
  mixins: [FormBase],
  methods: {
    handleData(str = '') {
      if (typeof str !== 'string') str = ''
      return str.replace(/[^#0-9a-fA-F]/g, '')
    }
  },
  computed: {
    value: {
      get: function() {
        return this.handleData(this.controlValue)
      },
      set: function(v) {
        let value = this.handleData(v)
        this.$emit('change', value)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.form-designer-color-picker-wrap {
  display: flex;

}
</style>
